<script setup>
import {useRouter} from "vue-router";

let router = useRouter();

function paramsTest() {
  //params传参方式 必须使用组件name
  // router.push('/haha/222/zhangsan/18')
  router.push({
    name: 'Haha',
    params: {
      id: 999,
      name: 'zhangsan999',
      age: 18
    }
  })
}

function queryTest(){
  // router.push('/hello?id=999&name=zhangsan999')
  router.push({
    name: 'Hello',
    query:{
      id: 999,
      name: 'zhangsan999'
    }
  })
}
</script>

<template>
  <router-link to="/">首页</router-link>
  <router-link to="/hello?id=1&name=zhangsan">Hello</router-link>
  <router-link :to="{
    name:'Hello',
    query: {
      id: 999,
      name: 'zhangsan',
    }
  }">Hello对象</router-link>

  <button @click="queryTest">Hello传参</button>
  <!--  <router-link to="/haha">haha</router-link>-->
  <!--  <router-link to="/haha/111/zhangsan/18">haha111</router-link>-->
  <router-link :to="{
  name:'Haha',
    params:{
      id:777,
      name:'zhangsan',
      age:18
    }
  }">对象传参
  </router-link>

  <button @click="paramsTest">params传参</button>
  <!--  <router-link to="/haha/abc">hahaabc</router-link>-->
  <router-link to="/user/007">用户中心</router-link>
  <hr/>
  <router-view></router-view>

  <!--
   1.整合vue-router
   2.配置vue-router.
      配置路由表
      创建路由表
   3.vue实例使用router
   3.配置 router-link 和 router-view

   -->
</template>

<style scoped>
a {
  margin-left: 10px;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
